﻿<script setup lang="ts" name="RichTextAnchor">
import useScrollPosition from '@/hooks/scrollPosition'
import { storeToRefs } from 'pinia'
import { useSystemConfigStore } from '@/store/storage/systemConfigStore'
import { getRichTextDetailInfo } from '@/api/list'
import RichTextOtherAnchor from '../Components/RichTextOtherAnchor.vue'
import XEUtils from 'xe-utils'
const route = useRoute()

const systemConfigStore = useSystemConfigStore()
const { systemConfig } = storeToRefs(systemConfigStore)
// 滚动行为
useScrollPosition(route)

const getQuery = () => {
  let currentQuery: any = {}
  if (route.query) {
    if (route.query.key !== undefined) {
      currentQuery.key = route.query.key
    }
    if (route.query.anchor) {
      currentQuery.anchor = route.query.anchor
    }
    if (route.query.key === undefined && !route.query.anchor) {
      currentQuery = null
    }
  } else {
    currentQuery = null
  }
  return currentQuery
}
const currentQuery = getQuery()
const initData: any = ref({})

const getInitData = (query) => {
  getRichTextDetailInfo(query, { config: { showLoading: false, mockEnable: true } }).then((res: any) => {
    if (res.data) {
      const resData = res.data
      resData.content = resData.content.replace(/name=['|"](.*?)['|"]/g, 'name="anchor-$1"')
      resData.content = resData.content.replace(/href=['|"]#(.*?)['|"]/g, 'onclick="document.querySelector(\'a[name=anchor-$1]\').scrollIntoView({ behavior: \'smooth\', block: \'start\' });"')
      initData.value = resData
      if (currentQuery && currentQuery.anchor) {
        setTimeout(() => {
          if (currentQuery.anchor.includes('.other-anchor-')) {
            document.querySelector(currentQuery.anchor).scrollIntoView({ behavior: 'smooth', block: 'start' })
          } else {
            document.querySelector('a[name=anchor-' + currentQuery.anchor + ']').scrollIntoView({ behavior: 'smooth', block: 'start' })
          }
        }, 500)
      }
      console.log(initData.value)
    }
  })
}
onMounted(() => {
  getInitData(currentQuery)
})
const typeList = ['', 'success', 'info', 'warning', 'danger']
</script>
<template>
  <el-space :size="systemConfig.space" fill direction="vertical">
    <el-card shadow="never" class="no-border no-radius">
      <div class="article">
        <h1>{{ initData.title }}</h1>
        <div class="line-info">
          <div class="num">
            <el-link :underline="false">
              <svg-icon class="el-icon--left" icon="ri:heart-fill"></svg-icon>
              {{ initData.like }}
            </el-link>
            <el-link :underline="false">
              <svg-icon class="el-icon--left" icon="ri:bookmark-3-fill"></svg-icon>
              {{ initData.collect }}
            </el-link>
            <el-link :underline="false">
              <svg-icon class="el-icon--left" icon="ri:chat-2-fill"></svg-icon>
              {{ initData.message }}
            </el-link>
            <el-link :underline="false">
              <svg-icon class="el-icon--left" icon="ri:user-fill"></svg-icon>
              {{ initData.author }}
            </el-link>
          </div>
          <div class="date">{{ initData.date }}</div>
        </div>
        <div class="line-tag">
          <el-tag v-for="(item, idx) in initData.tags" :key="idx" :type="(typeList[XEUtils.random(0, 4)]) as any">
            {{ item
            }}
          </el-tag>
        </div>
        <div class="content" v-html="initData.content"></div>
      </div>
      <rich-text-other-anchor></rich-text-other-anchor>
    </el-card>
  </el-space>
</template>

<style scoped lang="scss">
.el-space {
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}

.no-border {
  border: none;
}

.no-radius {
  border-radius: 0;
}

.article {

  h1 {
    font-weight: bold;
    font-size: calc(var(--el-font-size-extra-large) * 1.5);
    line-height: 2;
    text-align: center;
  }

  .line-info {
    display: flex;
    padding: 5px 0 10px;

    .num {
      flex: 1;

      .el-link {
        padding-right: 15px;
        color: var(--el-text-color-placeholder);
      }

      .el-link+.el-link {
        padding-left: 15px;
        border-left: 1px solid var(--el-border-color-light);
      }
    }

    .author {
      color: var(--el-text-color-placeholder);
    }

    .date {
      color: var(--el-text-color-placeholder);
    }
  }

  .line-tag {
    margin: 0 -5px;

    .el-tag {
      margin: 5px;
    }
  }

  .content {
    :deep(p) {
      display: flex;
      align-items: center;
      justify-content: center;

      a {
        height: 32px;
        margin: 20px;
        color: var(--el-color-primary);
        line-height: 32px;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    :deep(p+p) {
      position: relative;
      height: 80vh;
      background: var(--el-color-primary-light-9);

      a {
        position: absolute;
        top: 0;
        left: 0;
      }
    }

    :deep(p+p+p) {
      height: 40vh;
      background: var(--el-color-success-light-9);
    }

    :deep(p+p+p+p) {
      height: 60vh;
      background: var(--el-color-warning-light-9);
    }

    :deep(p+p+p+p+p) {
      height: 80vh;
      background: var(--el-color-danger-light-9);
    }
  }
}
</style>
